<template>
  <section>
    <van-sticky>
      <PageHeader title="服务套餐"/>
    </van-sticky>

    <van-form @submit="onFormSubmit">
      <van-field
        v-model="servicePackage.name"
        name="name"
        label="名称"
        placeholder="请输入名称"
        :rules="[{ required: true, message: '请输入名称' }]"
      />

      <van-field
        v-model="servicePackage.price"
        type="number"
        label="费用"
        required
        placeholder="请输入费用"
        :rules="[{ required: true, message: '请输入费用' }]">
        <template #button>
          <label>元</label>
        </template>
      </van-field>

      <van-field
        v-model="servicePackage.expire_time"
        type="digit"
        label="服务期限"
        required
        placeholder="请输入服务期限"
        :rules="[{ required: true, message: '请输入服务期限' }]">
        <template #button>
          <label>个月</label>
        </template>
      </van-field>

      <van-field name="is_sale" label="上线">
        <template #input>
          <van-switch v-model="servicePackage.is_sale" size="20" :active-value="1" :inactive-value="0" />
        </template>
      </van-field>

      <van-cell-group title="详情">
        <Ueditor :defaultMsg="servicePackage.detail" :config="ueConfig" id="ue" ref="ue"/>
      </van-cell-group>

      <div class="pd10">
        <van-button round block type="info" native-type="submit">
          保存
        </van-button>
      </div>
    </van-form>

  </section>
</template>

<script>
  import Vue from 'vue';
  import {Toast, Dialog, Sticky, Form, Field, CellGroup} from 'vant';
  import PageHeader from "../componets/PageHeader";
  import Ueditor from "../../components/Ueditor";
  import {
    BASE_PATH,
    servicePackageAddUri,
    servicePackageEditUri, servicePackageInfoUri,
    ueFileUploadUri
  } from "../../common/api";
  Vue.use(Toast).use(Dialog).use(Sticky).use(Form).use(Field).use(CellGroup);

  export default {
    components: {
      PageHeader,
      Ueditor
    },
    data() {
      const ueServerUrl = ueFileUploadUri + '?upload_token=' + this.GLOBAL.userInfo.upload_token;
      return {
        ueConfig: {
          UEDITOR_HOME_URL: BASE_PATH + '/static/js/ueditor/',
          serverUrl: ueServerUrl,
          initialFrameWidth: null,
          initialFrameHeight: 400
        },
        servicePackage: {
          id: 0,
          name: '',
          price: 0.00,
          expire_time: 12,
          detail: '',
          is_sale: 1
        }
      }
    },
    methods: {
      onFormSubmit(values) {
        const that = this;
        let url = servicePackageAddUri;
        if(this.servicePackage.id > 0) {
          url = servicePackageEditUri;
        }
        that.servicePackage.detail = this.$refs.ue.getUEContent();
        that.$http.post(url, that.servicePackage, {emulateJSON: true}).then(response => {
          let {msg, code, data} = response.body
          if (code != 0) {
            Toast.fail(msg)
          } else {
            Toast.success('保存成功');
            that.$router.back();
          }
        }, response => {
          Toast.fail('发生错误')
        })
      },
      getInfo() {
        const that = this;
        this.$http.get(servicePackageInfoUri + '?id=' + this.$route.params.id).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            Toast.fail(msg);
          } else {
            that.servicePackage = data.package;
            that.$refs.ue.setUEContent(data.package.detail);
          }
        }, response => {
          // error callback
        })
      }
    },
    mounted: function () {
      if(this.$route.name == 'ServicePackageEdit') {
        this.getInfo();
      }
    }
  }
</script>

<style scoped>

</style>
